import { ComboBox, Item, } from "@adobe/react-spectrum";
import { useState } from "react";
import { ListNodes, ListNotUsedConverters } from "~/lib/server";



export function SelectConverter() {


  const { data: nodes, error: nodesErr, isLoading: nodesIsLoading } = ListNodes();
  const { data: converters, error: convertersErr, isLoading: convertersIsLoading } = ListNotUsedConverters();


  const [selectedNode, setSelectedNode] = useState(null);

  return (
    <>

      <ComboBox
        name="nodeId"
        label="网关"
        items={nodes}
        onSelectionChange={setSelectedNode}
      >
        {(item) => <Item>{item.name}</Item>}
      </ComboBox>
      {selectedNode && (

        <ComboBox
          name="converterId"
          label="转换器"
          formValue="key"
          items={converters?.filter((i) => i.nodeId === selectedNode)}
        >
          {(item) => <Item>{item.name}</Item>}
        </ComboBox>


      )}

    </>
  )
}